<template>
  <div>
    <!-- 面包屑 -->
    <MBX l1="商品管理" l2="分类参数"></MBX>
    <!-- // 卡片 -->
    <el-card class="xia">
      <!-- // 警告 -->
      <el-alert
        title="注意:只允许为第三级分类设置相关参数"
        type="warning"
        show-icon
        :closable="false"
      >
      </el-alert>
      <p class="xia">
        选择商品分类:
        <!-- // 级联选择器 -->
        <el-cascader
          v-model="checkArr"
          :options="ParamsDate"
          :props="ParamsProps"
          @change="handleChange"
        ></el-cascader>
      </p>
      <!-- // 标签页 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button
            type="primary"
            size="mini"
            class="xia"
            :disabled="isOk"
            @click="addParams"
            >添加参数</el-button
          >
          <!-- // 表格 -->
          <el-table border class="xia" :data="TableDtae">
            <el-table-column type="expand">
              <!-- // tag -->
              <template slot-scope="scope">
                <div>
                  <el-tag
                    :key="index"
                    v-for="(item, index) in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index, scope.row)"
                  >
                    {{ item }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                    @blur="handleInputConfirm(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                    >+ New Tag</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    @click="showEdit(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    @click="ShowDel(scope.row.attr_id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button
            type="primary"
            size="mini"
            class="xia"
            :disabled="isOk"
            @click="addParams"
            >添加参数</el-button
          >
          <!-- // 表格 -->
          <el-table border class="xia" :data="DateTable">
            <el-table-column type="expand">
              <!-- // tag -->
              <template slot-scope="scope">
                <div>
                  <el-tag
                    :key="index"
                    v-for="(item, index) in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index, scope.row)"
                  >
                    {{ item }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                    @blur="handleInputConfirm(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                    >+ New Tag</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    @click="showEdit(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    @click="ShowDel(scope.row.attr_id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- // 添加模态框 -->
    <el-dialog title="添加动态参数" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="动态参数" prop="attr_name" label-width="80px">
          <el-input v-model="form.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="JiaParams">确 定</el-button>
      </div>
    </el-dialog>
    <!-- // 编辑模态框 -->
    <el-dialog title="编辑动态参数" :visible.sync="dialogFormVisle">
      <el-form :model="EditFrom">
        <el-form-item label="动态参数">
          <el-input v-model="EditFrom.attr_name" class="in1"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisle = false">取 消</el-button>
        <el-button type="primary" @click="AddEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { CanshuDelDataapi } from '@/http/api'
export default {
  name: '',
  components: {},
  data() {
    return {
      checkArr: [], // 选中级别id
      ParamsDate: [], // 存放级联数据
      TableDtae: [], // 动态数据
      DateTable: [], // 静态数据
      ParamsProps: {
        //级联框的默认值
        expandTrigger: 'hover',
        children: 'children',
        label: 'cat_name',
        value: 'cat_id'
      },
      activeName: 'many', // 默认是动态数据还是静态数据
      form: {
        // 需要传的添加数据
        attr_name: '',
        attr_sel: 'many'
      },
      dialogFormVisible: false, // 控制添加模态框的显示或隐藏
      dialogFormVisle: false, // 控制编辑模态框的显示或隐藏
      delId: 0, // 定义删除的id
      editId: 0, // 定义编辑的id
      EditFrom: {
        // 需要传的编辑数据
        attr_name: '',
        attr_vals: ''
      },
      rules: {
        attr_name: [{ required: true, message: '请添加参数', trigger: 'blur' }] // 傻瓜式正则验证
      }
    }
  },
  created() {
    this.getParams() // 调用级联框的数据
  },
  mounted() {},
  methods: {
    // 获取级联数据
    async getParams() {
      const res = await this.$QHL.ShopCateListapi()
      this.ParamsDate = res /// 赋值
      //   console.log(res)
    },
    // 监听练级
    handleChange() {
      this.getParamsCan() // 调用商品参数
      if (this.checkArr.length !== 3) {
        this.$message({
          type: 'error',
          message: '请选择到三级分类'
        })
        this.TableDtae = []
        return false
      } else {
        this.getParamsCan()
      }
    },
    // 监听标签页的变化
    handleClick() {
      this.getParamsCan() // 调用商品参数
      //   console.log(this.activeName)
    },
    // 获取商品参数
    async getParamsCan() {
      // 获取参数数据
      const res = await this.$QHL.ShuShopCateApi(
        this.currentId,
        this.activeName
      )
      // 区分动静态
      if (this.activeName === 'many') {
        // 渲染动态
        res.forEach((item) => {
          // 添加两个内容
          item.inputValue = ''
          item.inputVisible = false
          // console.log(item)
          item.attr_vals =
            item.attr_vals.length > 0 ? item.attr_vals.split(',') : []
        })
        // 动态赋值
        this.TableDtae = res
        console.log(res)
      } else if (this.activeName === 'only') {
        // 渲染静态
        res.forEach((item) => {
          // 添加两个内容
          item.inputValue = ''
          item.inputVisible = false
          // console.log(item)
          item.attr_vals =
            item.attr_vals.length > 0 ? item.attr_vals.split(',') : []
        })
        // 静态赋值
        this.DateTable = res
      }
    },
    // 转换input的操作
    showInput(row) {
      row.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    //   tag的监听事件
    async handleInputConfirm(row) {
      if (row.inputValue.trim()) {
        row.attr_vals.push(row.inputValue)
        await this.$QHL.CanshuDataapi(this.currentId, row.attr_id, {
          attr_name: row.attr_name,
          attr_sel: row.attr_sel,
          attr_vals: row.attr_vals.join(',')
        })
      }
      row.inputVisible = false
      row.inputValue = ''
    },
    // tag 的叉号
    async handleClose(i, row) {
      // console.log(i, row)
      row.attr_vals.splice(i, 1)
      await this.$QHL.CanshuDataapi(this.currentId, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.activeName,
        attr_vals: row.attr_vals.join(',')
      })
      this.getParamsCan()
      //   const res = await this.$QHL.CanshuDelDataapi(this.currentId, this.delId)
      //   console.log(res)
    },
    // 添加动态参数出弹框
    addParams() {
      this.form.attr_name = ''
      this.dialogFormVisible = true
    },
    // 完成添加
    async JiaParams() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return false
      })
      const res = await this.$QHL.CanshuAddDataapi(this.currentId, {
        attr_name: this.form.attr_name,
        attr_sel: this.activeName
      })
      console.log(res)
      this.getParamsCan()
      this.dialogFormVisible = false
    },
    // 删除
    ShowDel(id) {
      this.delId = id
      this.$confirm('是否删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        CanshuDelDataapi(this.currentId, this.delId)
          .then((res) => {
            console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getParamsCan()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      })
    },
    // 编辑弹框
    showEdit(row) {
      this.EditFrom.attr_vals = row.attr_vals // 赋值数据
      this.editId = row.attr_id // 赋值编辑id
      console.log(this.editId)
      this.EditFrom.attr_name = row.attr_name // 点击显示对应的名字
      this.dialogFormVisle = true
    },
    // 编辑关闭
    async AddEdit() {
      const res = await this.$QHL.CanshuDataapi(this.currentId, this.editId, {
        attr_name: this.EditFrom.attr_name,
        attr_sel: this.activeName,
        attr_vals: this.EditFrom.attr_vals.join(',')
      })
      this.getParamsCan()
      this.dialogFormVisle = false
      console.log(res)
    }
  },
  computed: {
    // 计算选中的最后一个的id
    currentId() {
      return this.checkArr.at(-1)
    },
    // 判断添加小按钮的启用或禁用
    isOk() {
      return this.checkArr.length !== 3
    }
  }
}
</script>
<style scoped lang="scss">
.el-cascader {
  margin-left: 10px;
  width: 300px;
}
.el-tag {
  margin: 6px 10px;
}
.input-new-tag {
  width: 100px;
}
.in1 {
  width: 50%;
}
</style>
